<template>
  <div class="app-item-contain apply-contain">
    <div class="apply-index-header">
      <div class="item-contain">
        <span class="title">报名分类：</span>
        <div class="data-select">
          <el-tree-select
            ref="tree"
            :props="defaultProps"
            node-key="id"
            v-model="sortItem"
            :data="applyArchiveList"
            check-strictly
            :render-after-expand="true"
            default-expand-all
            placeholder="报名分类"
            style="margin-top: -5px"
            @change="sortChange"
          />
          <!-- <el-radio-group v-model="queryParam.applyArchiveId">
            <el-radio
              v-for="item in applyArchiveList"
              :key="item.id"
              :label="item.id"
              @click.prevent="applyArchiveChange(item.id)"
              >{{ item.name }}
            </el-radio>
          </el-radio-group> -->
        </div>
      </div>
    </div>

    <div class="apply-card-contain">
      <none-show v-if="applyNoneShow" />
      <el-card
        v-for="item in tableData"
        :key="item.id"
        class="apply-card"
        shadow="hover"
      >
        <div @click="goApply(item.id)" class="wdd-hand">
          <div class="apply-title">{{ item.name }}</div>
          <div class="apply-item" style="margin-top: 10px">
            人数限制：{{ item.limitCount }}
          </div>
          <div class="apply-item">
            <div class="apply-left">报名截止时间：</div>
            <div class="apply-right">{{ item.applyEndTime }}</div>
          </div>
          <div class="apply-item">
            <div class="apply-left apply-limit-time-color">考试开始时间：</div>
            <div class="apply-right apply-limit-time-color">
              {{ item.limitStartTime }}
            </div>
          </div>
          <div class="apply-item">
            <div class="apply-left apply-limit-time-color">考试结束时间：</div>
            <div class="apply-right apply-limit-time-color">
              {{ item.limitEndTime }}
            </div>
          </div>
          <div class="apply-item">发布时间：{{ item.createTime }}</div>
        </div>
      </el-card>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParam.pageIndex"
      v-model:limit="queryParam.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import { list, page, goApply } from '@/api/apply';
// import { tree } from '@/api/applyArchive';
export default {
  data() {
    return {
      defaultProps: {
        value: 'id',
        children: 'child',
        label: 'name'
      },
      queryParam: {
        applyArchiveId: null,
        pageIndex: 1,
        pageSize: 10
      },
      listLoading: true,
      tableData: [],
      total: 0,
      applyArchiveList: [],
      applyNoneShow: false,
      sortItem: null
    };
  },
  created() {
    list().then(re => {
      this.applyArchiveList = re.response;
      this.sortItem = re.response[0].id;
    });

    this.search();
  },
  methods: {
    //分类改变回调
    sortChange(val) {
      this.applyArchiveChange(val);
    },
    applyArchiveChange(id) {
      if (id === this.queryParam.applyArchiveId) {
        this.queryParam.applyArchiveId = null;
      } else {
        this.queryParam.applyArchiveId = id;
      }
      this.search();
    },
    search() {
      this.listLoading = true;
      page(this.queryParam)
        .then(data => {
          const re = data.response;
          this.tableData = re.list;
          this.total = re.total;
          this.applyNoneShow = this.total === 0;
          this.queryParam.pageIndex = re.pageNum;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    goApply(id) {
      this.$confirm('此操作将提交报名申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goApply(id).then(re => {
          if (re.code === 1) {
            this.$message.success(re.response);
            this.search();
          } else {
            this.$message.error(re.message);
          }
        });
      });
    }
  }
};
</script>
